<template>
  <div class="bige">
    <ul class="bar">
      <li class="qq1">
        <a href="/qq.html" target="_blank">
          <div class="qq"></div>
        </a>
      </li>
      <li class="chengxu1" v-for="(v,i ) in teacherfile" :key="`2bottombar${i}`">
        <a :href="v.fileurl" :class="v.info.type == 1?'chengxu':'kejian'"></a>
      </li>
      <li class="chengxu1" v-for="(v,i ) in files" v-show="agent(v)" :key="`3bottombar${i}`">
        <a :href="v.file_URL" :style="{backgroundImage:`url(${v.img_URL})`}"></a>
      </li>
      <li v-if="getvideodialogVisible" class="chongxin1">
        <div @click="tiaoguo.sections.tiaoguo" class="chongxin"></div>
      </li>
      <li v-if="getvideodialogVisible">
        <div @click="tiaoguo.sections.submit" class="tijiao"></div>
      </li>
      <li class="clearfix"></li>
    </ul>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "bottombar",
  computed: mapGetters(["getvideodialogVisible"]),
  props: {
    tiaoguo: {
      type: Object
    },
    teacherfile: {
      type: Array,
      default: new Array()
    },
    files: Array
  },
  methods: {
    agent(v) {
      var agent = navigator.userAgent.toLowerCase();
      let system, arch;
      if (agent.indexOf("windows") != -1) {
        if (agent.indexOf("win64") >= 0 || agent.indexOf("wow64") >= 0) {
          arch = "64";
        } else {
          arch = "32";
        }
        system = "windows";
        if (v.system == system && v.arch == arch) {
          return true;
        }
      } else if (agent.indexOf("mac") != -1) {
        system = "mac";
        if (v.system == system) {
          return true;
        }
      } else {
        return true;
      }
      return false;
    }
  }
};
</script>

<style scoped>
.bige {
  height: 46px;
}
.bar {
  margin-left: 16px;
}
.bar li {
  float: left;
  margin-left: 15px;
  margin-right: 15px;
}
.qq {
  cursor: pointer;
  width: 125px;
  height: 46px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/QQ.png");
}
.chengxu {
  width: 154px;
  height: 40px;
  display: block;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/chnengxu.png");
}
.kejian {
  width: 154px;
  display: block;
  height: 40px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/kejian.png");
}
.chongxin {
  width: 154px;
  height: 40px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/jieda1.png");
}
.tijiao {
  width: 98px;
  height: 40px;
  background: no-repeat
    url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/tijiao2.png");
}
.chengxu1 a {
  display: inline-block;
  width: 154px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
</style>